<template>
  <!-- 证件 -->
  <div>
    <el-form ref="form" class="form" :model="query" label-position="right" label-width="80px">
      <el-form-item label="证件类型" prop="cardType">
        <el-select v-model="query.cardType" placeholder="请选择">
          <el-option
            v-for="item in cardTypeMap"
            :key="item.value"
            :label="item.desc"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="证件编号" prop="cardNo">
        <el-input v-model="query.cardNo" placeholder="单行输入" clearable>
          <el-button slot="append" class="append-search" @click="getCode">获取</el-button>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 61px; height: 30px;" @click="addMessage">添加</el-button>
      </el-form-item>
      <el-form-item prop="remark" class="block">
        <label slot="label">备&emsp;&emsp;注</label>
        <el-input v-model="query.remark" type="textarea" :rows="3" maxlength="255" show-word-limit />
      </el-form-item>
      <lb-table
        ref="lbTable"
        border
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        :total="tableData.total"
        height="200px"
        custom-column
        align="center"
        style="width: 100%;"
      />
    </el-form>
  </div>
</template>

<script>
  import { queryCodeGeneration } from '@/api'
  import { formatColumnMap } from '@/utils'

  export default {
    name: 'idInformation',
    props: {
      cardTypeMap: {
        type: Array,
        required: true
      },
      temp: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        query: {

        },
        tableData: {
          total: 0,
          column: [
            {
              prop: 'cardType',
              label: '证件类型',
              render: (h, { row }) => <span>{ row.cardType && formatColumnMap(this.cardTypeMap, 'value', row.cardType, 'desc') }</span>
            },
            {
              prop: 'cardNo',
              label: '证件编号',
              render: (h, { row }) => <span>{ row.cardNo }</span>
            },
            {
              prop: 'remark',
              label: '备注',
              render: (h, { row }) => <span>{ row.remark }</span>
            },
            {
              label: '操作',
              align: 'center',
              width: 210,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link size='mini' type='danger' onClick={() => this.del(row, $index)}>
                      删除
                   </el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    created() {
      // this.tableData.defaultData = JSON.parse(JSON.stringify(this.tableData.data))
    },
    mounted() {
      this.tableData.data = this.temp.cardItems
    },
    methods: {
      // 获取编码
      async getCode() {
        const code = {
          codeType: 18
        }
        const res = await queryCodeGeneration(code)
        this.query.cardNo = res.data
      },
      // handleEdit(row, $index) {
      //   this.$set(row, '_edit', true)
      // },
      // handleSave(row, $index) {
      //   this.$set(row, '_edit', false)
      //   this.$set(this.tableData.data, $index, JSON.parse(JSON.stringify(row)))
      // },
      del(row, index) {
        this.$confirm('确认要删除吗？', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.data.splice(index, 1)
          this.$message({
            type: 'success',
            message: '成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 添加信息
      addMessage() {
        if (!this.query.cardType) {
          this.$message.warning('请选择证件类型')
          return
        }
        if (!this.query.cardNo) {
          this.$message.warning('请输入证件编号')
          return
        }
        this.tableData.data.push({ ...this.query, cardStatus: 1 })
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 33%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
</style>
